<template>
	<div class="user_summary">
		<a-card style="width: 100%;" :bodyStyle="{
			padding: '0',
			paddingTop: '3px',
			paddingLeft:'10px',
			height: '49px'
		}">
			<a-tabs v-model:activeKey="activeKey">
				<a-tab-pane :key="1" tab="信息汇总" />
				<a-tab-pane :key="2" tab="人员字段管理" v-if="fieldList" />
			</a-tabs>
		</a-card>
		<section class="section hide-scroller-bar">
			<a-row v-if="activeKey==1">
				<draggable class="chart_list" v-model="chartList" v-bind="dragOptions" @end="handleDragEnd"
					item-key="id">
					<template #item="{ element, index }">
						<a-col :span="8">
							<div class="chart_item">
								<component :is="chartList[index].field_name" :chartHeight="300"
									:chartItem="chartList[index]" />
							</div>
						</a-col>
					</template>
				</draggable>
			</a-row>
			<div v-else style="padding: 5px;">
				<PersonManage></PersonManage>
			</div>
		</section>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		computed,
		createVNode,
		onActivated,
		reactive,
		toRefs
	} from "vue";
	import request from "../../../common/utils/request";
	import {
		ExclamationCircleOutlined,
		PlusOutlined,
		DownOutlined,
	} from "@ant-design/icons-vue";
	import store from "../../../store";
	import blood_type from "./components/blood_type.vue";
	import care_level from "./components/care_level.vue";
	import community_group from "./components/community_group.vue";
	import custody from "./components/custody.vue";
	import disabled from "./components/disabled.vue";
	import failure from "./components/failure.vue";
	import foucus_children from "./components/foucus_children.vue";
	import is_dibaohu from "./components/is_dibaohu.vue";
	import living_conditions from "./components/living_conditions.vue";
	import marital_status from "./components/marital_status.vue";
	import nation from "./components/nation.vue";
	import political_status from "./components/political_status.vue";
	import service_type from "./components/service_type.vue";
	import education from "./components/education.vue";
	import retiree from "./components/retiree.vue";
	import insurance_type from "./components/insurance_type.vue";
	import draggable from "vuedraggable";
	import PersonManage from "../PersonManage/index.vue"
	import BLCOMMON from "bl-common-vue3";
	export default defineComponent({
		components: {
			draggable,
			blood_type,
			care_level,
			community_group,
			custody,
			disabled,
			failure,
			foucus_children,
			is_dibaohu,
			living_conditions,
			marital_status,
			nation,
			political_status,
			service_type,
			education,
			retiree,
			insurance_type,
			PersonManage
		},
		setup(props, context) {
			const state = reactive({
				chartList: [],
				requestMap: {},
				drag: false,
				activeKey: 1
			})

			const dragOptions = computed(() => {
				return {
					animation: 200,
					group: "description",
					disabled: false,
					ghostClass: "ghost",
				}
			})

			const getFieldList = () => {
				request.get('/village', '/org/personal/enable/fields', {
					village_id: store.getters.buildingInfo.permissionBuildings[0].id
				}).then(res => {
					state.chartList = res.enableColumns
					state.requestMap = res.urlMap
				})
			}
			
			const handleDragEnd = (e) => {
				// let obj = state.chartList[e.newIndex]
				// state.chartList[e.newIndex] = state.chartList[e.oldIndex]
				// state.chartList[e.oldIndex] = obj
				// let arr = state.chartList.map(item=>item.id)
			}
			
			getFieldList()


			const fieldList = BLCOMMON.utils.getBtnPermission([
				"villageUserSummary",
				"curd",
				"list",
			]);
			return {
				handleDragEnd,
				dragOptions,
				...toRefs(state),
				fieldList
			}
		}
	})
</script>

<style lang="less" scoped>
.user_summary {
	width: 100%;
	height: 100%;

	.section{
		width: 100%;
		padding: 6px;
		height: calc(100% - 52px);
		overflow: hidden auto;
	}

	.chart_list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;

		.chart_item {
			height: 360px;
			margin: 5px;
			flex-shrink: 0;
		}
	}
}
</style>